<template>
  <!-- 漏斗分析保存 -->
  <div id="preserVation">
    <!-- 弹框 -->
    <div class="icon2">
      <el-button
        type="primary"
        icon="el-icon-tickets ticket"
        class="sea rch2"
        @click="saves"
        >保存
      </el-button>
    </div>

    <el-dialog
      title
      :visible.sync="dialogFormVisible"
      append-to-body
      style="width: 1400px; margin: 0 auto; border-radius: 2px"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="tabs"
        style="width: 650px; height: 350px"
      >
        <!--        更新当前书签-->
        <!--<el-tab-pane label="更新当前书签" name="updatemark" v-if="bookmarkId">
          <el-form
            ref="form"
            :model="updatemark"
            label-width="80px"
            style="margin-bottom: 50px"
          >
            &lt;!&ndash; 名称 &ndash;&gt;
            <el-form-item
              label="名称"
              style="margin-left: -28px;margin-top: 20px"
            >
              <el-input
                v-model="updatemark.name"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>

            &lt;!&ndash; 备注 &ndash;&gt;
            <el-form-item label="备注" style="margin-left: -26px">
              <el-input
                type="textarea"
                v-model="updatemark.remark"
                placeholder="可输入备注信息"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>-->

        <!-- 添加到概览 -->
        <el-tab-pane label="添加到概览" name="overview">
          <!-- 概览类型 -->
          <el-form ref="form" :model="overView" label-width="80px">
            <el-form-item label="概览类型" class="over first">
              <el-radio-group
                @change="handleQueryOverviewList"
                v-model="overView.resource"
                style="margin-left: 50px"
              >
                <el-radio :label="0">公共概览</el-radio>
                <el-radio :label="1">我的概览</el-radio>
              </el-radio-group>
            </el-form-item>
            <div
              class="myoverview"
              style="
                margin: -25px 0 20px 130px;
                font-size: 12px;
                line-height: 18px;
                color: #8492a6;
              "
            >
              <p v-if="overView.resource == 1">我的概览仅支持本人查看</p>
              <p v-else>公共概览可支持他人查看</p>
            </div>

            <!-- 名称 -->
            <el-form-item
              label="名称"
              class="name first"
              style="margin-left: -28px"
            >
              <el-input
                v-model="overView.name"
                style="margin-left: 80px; width: 400px"
                >搜索结果转化为漏斗</el-input
              >
            </el-form-item>

            <!-- 选择概览 -->
            <el-form-item label="选择概览" class="select first">
              <el-select
                multiple
                clearable
                filterable
                v-model="overView.select"
                placeholder="请选择概览"
                style="margin-left: 53px; width: 400px"
              >
                <el-option
                  v-for="item in _overviewList"
                  :key="item.id"
                  :label="item.overviewName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 备注 -->
            <el-form-item
              label="备注"
              class="mark first"
              style="margin-left: -26px"
            >
              <el-input
                type="textarea"
                v-model="overView.remark"
                placeholder="可输入备注信息"
                style="margin-left: 80px; width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 保存为书签 -->
        <!-- <el-tab-pane label="保存为书签" name="bookmark">
          <el-form ref="form" :model="bookMark" label-width="80px">
            &lt;!&ndash;            书签类型&ndash;&gt;
            <el-form-item label="书签类型">
              <el-radio-group v-model="bookMark.type" style="margin-left: 50px;">
                <el-radio :label="1">我的书签</el-radio>
              </el-radio-group>
            </el-form-item>
            <div
              class="mybookemark"
              style="margin: 0px 0 20px 130px;font-size: 12px;
      line-height: 18px;
      color: #8492a6;"
            >
              我的书签可以在书签页面查看，支持添加到我的概览中，不支持添加到公共概览
            </div>

            &lt;!&ndash; 名称 &ndash;&gt;
            <el-form-item label="名称" style="margin-left: -28px">
              <el-input
                v-model="bookMark.name"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>

            &lt;!&ndash; 备注 &ndash;&gt;
            <el-form-item label="备注" style="margin-left: -26px">
              <el-input
                type="textarea"
                v-model="bookMark.remark"
                placeholder="可输入备注信息"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>-->
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { thinglList, bookmarkCreate, bookmarkDetail } from "./api.config";

import { operationCtx } from "@/utils/auth.js";
export default {
  name: "preserVation",
  props: ["bookmarkId"],
  data() {
    return {
      operatorId: "",
      show: false,
      dialogFormVisible: false,
      activeName: "overview",
      overView: {
        //添加到概览
        resource: 0,
        name: "搜索结果转化为漏斗",
        select: "",
        remark: "",
      },
      updatemark: {
        //更新当前书签
        name: "",
        remark: "",
      },
      bookMark: {
        //保存为书签
        type: 1,
        name: "搜索结果转化为漏斗",
        remark: "",
      },
      form: {
        delivery: false,
      },
      formLabelWidth: "120px",
      choose: [],
      overviewList: [], // 概览列表
    };
  },
  components: {},
  created() {
    // this.getOverview();
    this.handleQueryOverviewList();
    this.operatorId = operationCtx.operatorDTO.operatorId;
  },
  methods: {
    // 查询概览列表
    async handleQueryOverviewList() {
      this.overView.select = "";
      let appId = this.$store.state.global.appItem.appId;
      let data = {
        appId,
        overviewGroupType: this.overView.resource,
        currentPage: this.bookMark.type,
        pageSize: 10000,
      };
      let res = await this.$analysisApi.dataCard.overviewList(data);
      console.log("res: ", res);
      if (res) {
        this.overviewList = res.value.list;
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //获取选择概览
    getOverview() {
      thinglList({
        req: {
          appId: JSON.parse(window.sessionStorage.getItem("appItem")).appId,
        },
        operationCtx: {},
      }).then((res) => {
        // 返回状态码返回状态如果不是 true，说明数据异常，需弹窗提示
        if (res.data.success !== true) {
          t.$message.error(res.data.errorMessage);
          return;
        }

        this.choose = res.data.value.list;
      });
    },
    //获得分享书签详情
    getDetail() {
      bookmarkDetail({}, this.bookmarkId).then((res) => {
        console.log(res);

        // 返回状态码返回状态如果不是 true，说明数据异常，需弹窗提示
        if (res.data.success !== true) {
          t.$message.error(res.data.errorMessage);
          return;
        }
      });
    },
    saves() {
      this.dialogFormVisible = true;
    },

    save() {
      if (this.activeName === "overview") {
        this.handleSaveGrid();
      } else {
        var arr = [];
        if (this.overView.select) {
          arr.push(this.overView.select);
        }
        // var fromDate = [
        //   this.winPeriod[0] = this.getBeforeDate(7 - 1),
        //   this.winPeriod[1] = this.getBeforeDate()
        // ];
        // var by_field_steps = [];
        // var byFields = this.viewFunnelTypes.arr_check;
        // var conditions = {
        //   field: this.arrSetting[i],
        //   function: this.equal,
        //
        // };
        // var ilter_field_steps;
        // var objData = {
        //   fromDate: fromDate,
        //   funnelId: 5444,
        //   by_field_steps: by_field_steps,
        //   bookmarkid: 57789,
        //   byFields: byFields,
        //   bucketParams: {},
        //   conditions: conditions
        // };
        // 分享书签新建
        bookmarkCreate({
          name: this.overView.name,
          dashboardIds: arr,
          bookmark: this.bookMark.remark,
          data: JSON.stringify(this.obj),
          config: "{}",
          type: "segmentation",
          mode: 0,
        }).then((res) => {
          // 返回状态码返回状态如果不是 true，说明数据异常，需弹窗提示
          if (res.data.success !== true) {
            this.$message.error(res.data.errorMessage);
            return;
          }

          this.dialogFormVisible = false;
        });
        // bookmarkUpdate({id:''}).then(res => {
        //   console.log(res.data.data)
        // })
      }
    },

    // 保存概览
    async handleSaveGrid() {
      let params;
      let _this = this;
      this.$emit("getSearchFunnelParams", async (val) => {
        params = val;
        let { name, select, remark } = this.overView;
        let obj = {
          chartType: 4,
          appId: _this.$store.state.global.appItem.appId,
          windowSize: 2,
          queryJson: JSON.stringify(params),
          type: 1,
          overviewIds: select,
          name,
          remarks: remark,
        };
        let res = await this.$analysisApi.eventAnalysis.overviewComponentAdd(
          obj
        );
        try {
          if (res) {
            _this.$message.success("保存成功");
            _this.dialogFormVisible = false;
          }
        } catch (e) {
          _this.$message.success("保存失败");
        }
      });
    },
  },
  mounted() {
    // console.log(this.bookmarkId);
    // this.getDetail();
  },
  computed: {
    _overviewList() {
      let arr = JSON.parse(JSON.stringify(this.overviewList));
      let _arr = arr.filter((_i) => {
        if (this.overView.resource == 0 && _i.overviewGroupType == "0") {
          return true;
        }
        if (
          this.overView.resource == 1 &&
          _i.overviewGroupType == 1 &&
          _i.creatorId == this.operatorId
        ) {
          return true;
        }
        return false;
      });
      return _arr;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 20px !important;
}
#preserVation {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.icon2 {
  position: relative;
  display: flex;
  float: left;
  left: -7px;
  top: 20px;

  .sea {
    display: flex;
    margin-top: -40px;
    height: 20px;
    background: none;
    border: none;
    font-size: 14px;
    color: #559ff0;
    cursor: pointer;
  }

  .tabs {
    margin-top: -30px;
  }
}
</style>

<style scoped>
#preserVation {
  height: 100%;
  position: relative;
}

::v-deep .el-dialog__header {
  padding-bottom: 0;
  padding: 0;
}
</style
>>
